<template>
	<view class="content">
		<u-form :model="loginForm" ref="loginRef">
			<u-form-item prop="mobile">
				<image class="iconLeft" src="../../static/register/icon_srsjh.png" mode="widthFix"></image>
				<u-input v-model="loginForm.mobile" placeholder="请输入手机号" placeholder-style="color:#373737" />
			</u-form-item>

			<u-form-item prop="code">
				<image class="iconLeft" src="../../static/login/icon_yzm.png" mode="widthFix"></image>
				<u-input v-model="loginForm.code" placeholder="请输入验证码" placeholder-style="color:#373737" />
				<text @click="getCode" class="codetext themeBac cwhite f20">{{tips}}</text>
				<u-toast ref="uToast"></u-toast>
				<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange">
				</u-verification-code>
			</u-form-item>

			<u-form-item prop="code">
				<image class="iconLeft" src="../../static/register/icon_srmm.png" mode="widthFix"></image>
				<u-input :password-icon="false" :clearable="false" :type="inputType1" v-model="loginForm.password"
					placeholder="请输入密码" placeholder-style="color:#373737" />
				<u-icon @click="eyeClick1" :name="eyeUrl1"></u-icon>
			</u-form-item>

			<u-form-item prop="code">
				<image class="iconLeft" src="../../static/register/icon_srmm.png" mode="widthFix"></image>
				<u-input :password-icon="false" :clearable="false" :type="inputType2" v-model="loginForm.passwordAgain"
					placeholder="请再次输入密码" placeholder-style="color:#373737" @blur="inputbBlur"/>
				<u-icon @click="eyeClick2" :name="eyeUrl2"></u-icon>
			</u-form-item>
		</u-form>
		
		<button @click="toRegister" class="themeBac cwhite mt60">确认修改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {
					mobile: "",
					code: "",
					password: "",
					passwordAgain: "",
				},
				code:'',
				eyeUrl1: 'eye-off',
				inputType1: 'password',
				eyeUrl2: 'eye-off',
				inputType2: 'text',
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}]
				},
				tips: "",
				seconds:60,
				pwdType:true,
			}
		},
		onReady() {
			this.$refs.loginRef.setRules(this.rules);
		},
		methods: {
			eyeClick1() {
				if (this.eyeUrl1 === "eye") {
					this.eyeUrl1 = "eye-off",
						this.inputType1 = "password"
				} else {
					this.eyeUrl1 = "eye",
						this.inputType1 = "text"
				}
			},
			eyeClick2() {
				if (this.eyeUrl2 === "eye") {
					this.eyeUrl2 = "eye-off",
						this.inputType2 = "password"
				} else {
					this.eyeUrl2 = "eye",
						this.inputType2 = "text"
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 接口 发送验证码
					const res = await this.$u.api.verificationCode()
					this.code=res.data
					
					setTimeout(() => {
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 1000);
				}
			},
			toRegister(){
				console.log(this.loginForm);
				this.$refs.loginRef.validate(valid => {
					if (valid) {
						if(this.loginForm.code!=this.code){
							this.$u.toast('验证码填写错误！')
							return;
						}
						this.pwdFlag?this.forgetPwd():this.inputbBlur()
					} 
				});
			},
			async forgetPwd(){
				const res = await this.$u.api.forgetPwd({
					phone:this.loginForm.mobile,
					pwd:this.loginForm.password
				})
				res.success?this.$to("../register/register"):this.$u.toast(res.msg)
			},
			inputbBlur() {
				if (this.loginForm.password != this.loginForm.passwordAgain) {
					this.$u.toast('密码不一致！')
					this.pwdFlag = false
					return;
				}
				this.pwdFlag = true
			},
		}
	}
</script>

<style>
	.content {
		padding: 50rpx 70rpx;
	}

	/* 表单 */
	.u-form-item {
		border-bottom: 4rpx solid #707070;
		padding: 0;
		margin-bottom: 20rpx;
	}

	.iconLeft {
		width: 27rpx;
		margin-right: 20rpx;
	}

	.codetext {
		border-radius: 10rpx;
		line-height: 50rpx;
		padding: 0 5rpx;
	}
</style>
